<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src = "./filter/vueFilter.js"></script>
</head>
<link rel="stylesheet" href="./css/common.css">
<style>
    .contain #img-left {
        width: 300px;
        height: 500px;
        margin: 50px 0 0 50px;
        background-color: #3a8ee6;
    }

    .contain img {
        width: 300px;
        height: 500px;
    }

    #contain-right {
        margin: 50px 10px 0 0;
        padding-left: 20px;
        padding-bottom: 20px;
    }

    #contain-right .title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;

    }

    .detail {
        margin: 10px;
    }

    .detail div {
        padding: 10px 0;
    }

    .pricelist, .btnlist {
        margin-left: 20px;
    }

    .pricelist li {
        padding: 5px 10px;
        border: 1px solid deeppink;
        /*background-color: deeppink;*/
        margin: 2px;
    }

    .btnlist button {
        width: 25px;
        height: 25px;
        margin: 0 5px;
    }

    .btnlist input {
        width: 25px;
        height: 25px;
        outline: none;
        border: none;
        text-align: right;
        margin: 0 5px;
        /*background-color: deeppink;*/
    }

    [v-cloak] {
        display: none;

    }

    .active {
        background-color: deeppink;
    }

    .tip {
        margin-left: 20px;
        font-style: italic;
    }
</style>
<body>
<div id="app" v-cloak>
    <div class="flex contain">
        <div id=img-left>
            <img src="https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ssxoub2GdSKPKpwqI_!!2251059038.jpg_q60.jpg"
                 alt=""></div>
        <div id="contain-right">
            <div class="title">【北京】2021 WAGF 音乐节 Gin《Passage》 吉他音乐会</div>
            <div class="detail j-s">
                <div>时间：2021.08.21 周六 20:00</div>
                <div>场馆：北京市 | 东方梅地亚中心M剧场</div>
                <div>场次：2021-08-21 周六 20:00</div>
                <div class="flex a-c">
                    <div>票档:</div>
                    <ul class="flex pricelist">
                        <li @click="activeindex=index" v-for="(item,index) in price"
                            :class="{active:activeindex===index}">{{item}}
                        </li>
                    </ul>
                </div>
                <div class="flex a-c ">
                    <div>数量:</div>
                    <div class="flex  btnlist">
                        <!--vue中添加属性属性什么时候起作用看后面表达式的值-->
                        <button @click="count++" :disabled="count===6">+</button>
                        <input v-model:value="count" @input="setcount">张
                        <button @click="count--" :disabled="count===1">-</button>

                    </div>
                    <div class="tip" v-show="count===6">每笔订单限购6张</div>
                </div>
                <div>合计</div>
                <div @click="setsex">性别</div>
                <!--{{属性|过滤器}}   使用过滤器过滤属性的值 -->
                <div>{{ALLIN | filterVal}}</div>
                <div>{{ALLIN | filterVal1}}</div>
                <div>{{ALLIN | toFixed }}</div>
                <div>{{sex | toGender}}</div>
            </div>

        </div>
    </div>
</div>
<script>
    Vue.config.devtools = false
    Vue.config.productionTip = false
    // 全局过滤器 没有s 否则报错404————全局过滤器 放在单独文件夹
    /*
    * 一个页面中可以用vue去渲染不同的容器 全局过滤器对所有的vue对象适用而局部只对包含filter属性的vue适用
    * */
    Vue.filter('filterVal1',function (val){
        return val.toFixed(2)
    })
    new Vue({
        el: "#app",
         // 过滤器---vue提供的操作 ： 1 对总价的小数进行过滤器的操作
        filters:{
            /*
            *  过滤器中名字可以随意写 过滤器的使用就是在变量中 | 过滤器
            *  局部过滤器：过滤方法只能在当前这个vue实例对象中使用
            * */
            filterVal(val){
                // 过滤器函数是指 对进来的值val 返回的val保存两位小数
                return val.toFixed(2)
            }

        },
        computed: {
            ALLIN() {
                // return (this.count * this.price[this.activeindex]).toFixed(2)
                return (this.count * this.price[this.activeindex])
            },
            // GEN(){
            //     return this.sex
            // }
        },
        data() {
            return {
                // 高亮索引
                activeindex: 0,
                // 数量
                count: 1,
                sex:0,
                // 价格列表
                price: [255, 355, 455, 555]
            }
        },
        methods: {
            setcount() {
                if (isNaN(this.count)) {
                    this.count = 1
                }
                // 如果输入不是整数 强制转换为郑虎
                if (!Number.isInteger((this.count))) {
                    this.count = Math.floor(this.count)
                }
                if (this.count < 1) {
                    this.count = 1
                }
                if (this.count > 6) {
                    this.count = 6
                }
            },
            setsex(){
                console.log(this.sex)
                // if(this.sex===0){
                //     this.sex=1;
                // }else{
                //     this.sex=0;
                // }
                this.sex===1?this.sex=0:this.sex=1;
            }
        },

    })
</script>
</body>
</html>